<template>
  <a-drawer
    v-model:visible="visible"
    :title="modalTitle"
    width="80%"
    :closable="false"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    <a-row type="flex" class="mb-3">
      <TimeLine :list="stateInfo.order_status_step" />
    </a-row>
    <a-row class="mb-3">
      <a-card class="base_card" :bodyStyle="{ padding: '20px 40px' }">
        <div class="card-title">基本信息</div>
        <a-row type="flex">
          <a-col
            v-for="(item, index) in stateInfo.base_info"
            :key="index"
            :span="6"
          >
            <div class="flex mb-1">
              <div>{{ item.title }}</div>
              <div>{{ item.content }}</div>
            </div>
          </a-col>
          <a-col
            v-for="(item, index) in stateInfo.order_give"
            :key="index"
            :span="6"
          >
            <div class="flex mb-1">
              <div>{{ item.title }}：</div>
              <div>{{ item.content }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flex mb-1">
              <div>是否允许发货：</div>
              <div>{{ stateInfo.is_send == 0 ? "否" : "是" }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="flex mb-1">
              <div>是否允许售后：</div>
              <div>{{ stateInfo.is_refund == 0 ? "否" : "是" }}</div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </a-row>
    <a-row class="mb-3">
      <a-card class="base_card" :bodyStyle="{ padding: '20px 40px' }">
        <a-row type="flex" :gutter="20">
          <a-col :span="6">
            <div class="card-title">用户信息</div>
            <div class="flex gap">
              <a-avatar :src="stateInfo.userInfo?.avater" :size="40">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
              <div>
                <div class="userName">{{ stateInfo.userInfo?.nickname }}</div>
                <div>{{ stateInfo.user?.mobile }}</div>
              </div>
            </div>
          </a-col>
          <a-col :span="6" v-for="(item, i) in stateInfo.order_info" :key="i">
            <div class="card-title">
              {{ item.title }}
            </div>
            <div v-for="(child, index) in item.data" :key="index" class="flex">
              <div>{{ child.title }}</div>
              <div>{{ child.content }}</div>
            </div>
          </a-col>
          <a-col :span="6" v-if="stateInfo.ship_info">
            <div class="card-title">{{ stateInfo.ship_info.title }}</div>
            <template v-if="stateInfo.ship_info.ship_name">
              <div class="flex mb-1">
                <div>物流公司：</div>
                <div>{{ stateInfo.ship_info.ship_name }}</div>
              </div>
              <div class="flex mb-1">
                <div>物流编号：</div>
                <div>{{ stateInfo.ship_info.ship_code }}</div>
              </div>
              <div class="flex mb-1">
                <div>物流单号：</div>
                <div>{{ stateInfo.ship_info.ship_no }}</div>
              </div>
              <div class="flex mb-1">
                <div>创建时间：</div>
                <div>{{ stateInfo.ship_info.create_time }}</div>
              </div>
            </template>
            <template v-else>
              <div class="flex mb-1">
                <div>店铺名称：</div>
                <div>{{ stateInfo.ship_info.shop_name }}</div>
              </div>
              <div class="flex mb-1">
                <div>店铺电话：</div>
                <div>{{ stateInfo.ship_info.shop_mobile }}</div>
              </div>
              <div class="flex mb-1">
                <div>店铺详细地址：</div>
                <div>{{ stateInfo.ship_info.shop_detail }}</div>
              </div>
              <div class="flex mb-1">
                <div>是否核销：</div>
                <div>{{ stateInfo.ship_info.is_check == 1 ? "是" : "否" }}</div>
              </div>
            </template>
          </a-col>
        </a-row>
      </a-card>
    </a-row>
    <div
      class="mb-3"
      v-if="stateInfo.order_rebate && stateInfo.order_rebate.length > 0"
    >
      <div class="title">返佣信息</div>
      <a-table
        :dataSource="stateInfo.order_rebate"
        :columns="rebateColumns"
        rowKey="id"
        :pagination="false"
        :scroll="{ x: 1200 }"
      ></a-table>
    </div>
    <div class="mb-3 mt-2">
      <a-row justify="end">
        <a-col :span="4">
          <a-descriptions :column="1" class="order_fee">
            <a-descriptions-item
              :label="item.title"
              v-for="(item, index) in stateInfo.order_fee"
              :key="index"
            >
              <span class="content">{{ item.content }}</span>
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
    </div>
    <div
      class="mb-3"
      v-if="stateInfo.order_ship && stateInfo.order_ship.length > 0"
    >
      <div class="title">物流信息</div>
      <a-table
        :dataSource="stateInfo.order_ship"
        :columns="shipColumns"
        rowKey="id"
        :pagination="false"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'actions'">
            <a-space size="small">
              <a-button type="link" @click="editLogistics(record)"
                >修改</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
    <div type="flex" class="mb-3">
      <div class="title">订单日志</div>
      <a-table
        :dataSource="stateInfo.order_log"
        :columns="logColumns"
        rowKey="id"
        :pagination="false"
      >
      </a-table>
    </div>
    <div class="flex justify-end">
      <a-space size="middle">
        <a-button
          v-for="(btn, i) in stateInfo.actions"
          :key="i"
          type="primary"
          @click="clickBtn(btn)"
          >{{ btn.title }}</a-button
        >
      </a-space>
    </div>
  </a-drawer>
  <!-- 发货 -->
  <OrderSend ref="send" :id="stateInfo.order_id" @modal-success="refresh" />
  <VirOrderSend
    ref="virRef"
    :id="stateInfo.order_id"
    @modal-success="refresh"
  />
</template>
<script setup>
import useModal from "@/utils/useModal";
import { info, setSend, setRefund } from "@/api/order";
import { reactive, ref } from "vue";
import OrderSend from "./components/OrderSend.vue";
import VirOrderSend from "./components/VirOrderSend.vue";
import { message } from "ant-design-vue";
import { UserOutlined } from "@ant-design/icons-vue";

const { visible, modalTitle } = useModal();
const emits = defineEmits(["modal-success"]);

const id = ref(0);
const send = ref(null);
const virRef = ref(null);

const logColumns = [
  {
    title: "id",
    dataIndex: "log_id",
  },
  {
    title: "内容",
    dataIndex: "content",
    customRender(record) {
      return record.value || "-";
    },
  },
  {
    title: "IP",
    dataIndex: "store_ip",
    customRender(record) {
      return record.value || "-";
    },
  },
  {
    title: "操作人",
    dataIndex: "store_name",
    customRender(record) {
      return record.value || "-";
    },
  },
  {
    title: "操作时间",
    dataIndex: "create_time",
  },
];
const rebateColumns = [
  {
    title: "类型",
    dataIndex: "rebate_type",
    width: 100,
    customRender(record) {
      const type = ["", "一级", "二级"];
      return type[record.value];
    },
  },
  {
    title: "返利比例",
    dataIndex: "rebate_rate",
    width: 150,
    customRender(record) {
      return `${record.value + "%" || "-"}`;
    },
  },
  {
    title: "返利状态",
    dataIndex: "rebate_status",
    width: 150,
    customRender(record) {
      const type = ["未到账", "己到账"];
      return type[record.value];
    },
  },
  {
    title: "是否有效",
    dataIndex: "status",
    width: 150,
    customRender(record) {
      const type = ["否", "是"];
      return type[record.value];
    },
  },
  {
    title: "到账时间",
    dataIndex: "bet_time",
    width: 150,
  },
  {
    title: "预计到账时间",
    dataIndex: "rebate_time",
    width: 150,
  },
  {
    title: "返利金额",
    dataIndex: "rebate_price",
    width: 150,
    customRender(record) {
      return `￥${record.value || "-"}`;
    },
  },
  {
    title: "利润",
    dataIndex: "profit",
    width: 150,
  },
  {
    title: "失效原因",
    dataIndex: "remark",
    width: 150,
    customRender(record) {
      return record.value || "-";
    },
  },
];
const shipColumns = [
  { title: "物流公司", dataIndex: "ship_name" },
  { title: "物流单号", dataIndex: "ship_no" },
  { title: "商品数量", dataIndex: "goods_num" },
  { title: "操作", dataIndex: "actions", fixed: "right", width: 100 },
];
const stateInfo = reactive({
  is_send: 0, //是否允许发货
  is_refund: 0, //是否允许售后
  is_virtually: 0, // 是否虚拟商品
  order_id: null,
  actions: [],
  base_info: {}, //基本信息
  order_goods: [],
  order_fee: [],
  order_info: [],
  order_log: [],
  order_ship: [],
  order_status_step: [],
  user: {},
  userInfo: {},
  order_give: [],
  ship_info: {},
});
const show = (record) => {
  visible.value = true;
  modalTitle.value = "订单详情";
  id.value = record.order_id;
  getDetails(record.order_id);
};
const onClose = () => {
  visible.value = false;
};
// 获取详情
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code == 0) {
      const data = res.data;
      Object.keys(data).forEach((key) => {
        stateInfo[key] = data[key];
      });
    }
  });
};
const clickBtn = (item) => {
  switch (item.type) {
    case 1:
      if (stateInfo.is_virtually == 0) {
        // 立即发货
        send.value.show({
          id: id.value,
          ...item,
        });
      } else {
        // 虚拟商品订单发货
        virRef.value.show({
          id: id.value,
          ...item,
        });
      }

      break;
    case 2:
      // 设置是否允许发货
      setSend({
        id: id.value,
      }).then((res) => {
        if (res.code == 0) {
          message.success(res.msg);
          refresh();
        }
      });
      break;
    case 3:
      // 设置是否允许售后
      setRefund({
        id: id.value,
      }).then((res) => {
        if (res.code == 0) {
          message.success(res.msg);
          refresh();
        }
      });
      break;
  }
};
// 修改物流信息
const editLogistics = (record) => {
  ship.value.show({
    ...record,
    id: record.id,
    logistics_number: record.ship_no,
    logistics_id: record.ship_id,
  });
};
const refresh = () => {
  if (id.value !== 0) {
    getDetails(id.value);
    emits("modal-success");
  }
};

defineExpose({
  show,
});
</script>
<style scoped lang="scss"></style>